import { Fragment, useState } from "react"
import HomePage_ModalComponent_HeaderNormalComponent from "../modal/component/headerNormal"
import lessModule from "./index.module.less"
import { $WarningLevelColor } from "../../../../common/utils"
import HomePage_ChartLineComponent from "../chartLine"
import { Button, message } from "antd"
import { $Http } from "../../../../network"
// 主页-详情弹窗组件
interface homePageDetailModalComponentInterface {
    name: string
    isConfirm?: boolean
    modalData: object
    change_cancel: Function
}
const HomePage_DetailModalComponent: React.FC<homePageDetailModalComponentInterface> = (props) => {
    const rowList = [
        [
            {
                title: `${props.name === "预警" ? "触发" : props.name === "事件" && "发生"}时间`,
                key: "startTime"
            },
        ],
        [
            {
                title: "巡回中心",
                key: "maintainCentre"
            },
            {
                title: `${props.name === "预警" ? "预警" : props.name === "事件" && "所属"}站点`,
                key: "stationName"
            },
            {
                title: props.name === "预警" ? props.modalData["monitoringType"] === "主变" ? "监测主变" : props.modalData["monitoringType"] === "线路" && "预警线路" : props.name === "事件" && "所属",
                key: "warningName"
            },
            {
                title: "监测类型",
                key: "monitoringDevice"
            },
            {
                title: "数据类型",
                key: "dataType"
            },
        ],
        [
            {
                title: "检测值",
                key: "detectionValue",
                color: $WarningLevelColor("一级")
            },
            {
                title: "预警等级",
                key: "warningLevel",
                color: $WarningLevelColor("一级")
            },
            {
                title: "预警信息",
                key: "warningInfo",
                color: $WarningLevelColor("一级")
            },
        ],
        [
            {
                title: "状态",
                key: "status",
                color: props.modalData["status"] === "已确认" ? "#52C41A" : "#FAAD14",
            },
            {
                title: "确认人",
                hide: props.isConfirm,
                key: "confirmPeople"
            },
            {
                title: "确认时间",
                hide: props.isConfirm,
                key: "confirmTime"
            },
        ],
    ]
    const click_confirm = () => {
        $Http("confirmEvent", { id: props.modalData["id"] }).then((res) => {
            message.success(res["success"])
            props.change_cancel(true)
        })
    }
    return (
        <div className={lessModule["homePageDetailModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name={`${props.name}详情`} padding="20px 19.5px 15.5px 31px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePageDetailModalComponent-main"]} style={{ paddingBottom: props.isConfirm ? 0 : 55 }}>
                {
                    rowList.map((item, idx) => {
                        return (
                            <div key={`rowItem${idx}`} className={lessModule["homePageDetailModalComponent-main__row"]}>
                                {
                                    item.map((item, idx) => {
                                        return (
                                            <Fragment key={`item${idx}`}>
                                                {
                                                    !item?.["hide"] && <div className={lessModule["main-row__group"]}>
                                                        <span>{item["title"]}：</span>
                                                        <span style={{ color: item["color"] ?? "rgba(0, 0, 0, 0.85)" }}>{props.modalData[item["key"]] ?? "-"}</span>
                                                    </div>
                                                }
                                            </Fragment>
                                        )
                                    })
                                }
                            </div>
                        )
                    })
                }
                <div className={lessModule["homePageDetailModalComponent-main__chart"]} >
                    <HomePage_ChartLineComponent id="homePageDetailModalComponentChartLine" name="中性点直流（A）" color="#2BEDE6" isWarningLine sourceData={props.modalData} />
                </div>
            </main>
            {
                props.isConfirm && <footer className={lessModule["homePageDetailModalComponent-footer"]}>
                    <Button className={lessModule["homePageDetailModalComponent-footer__btn"]} type="primary" onClick={click_confirm}>确认</Button>
                </footer>
            }
        </div>
    )
}

export default HomePage_DetailModalComponent